import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Table, Divider, Row, Col, Select, Button } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getCurrentUser } from '../../utils/authority';

import { Link, routerRedux } from 'dva/router';

@connect(({ lesson3, loading }) => ({
  lesson:lesson3,
  loading: loading.models.lesson3,
}))
@Form.create()
class LessonTableList extends PureComponent {
  state = {
    data: [],
  };
  componentDidMount = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lesson3/getList',
    }).then(() => {
      const { dataSource = [] } = this.props.lesson;
      this.setState({ data: dataSource });
    });
    dispatch({
      type: 'lesson3/getTeacherInfo',
    });
  };
  refreshTable = param => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lesson3/getList',
      payload: param,
    });
  };
  lessonColumn = () => {
    return [
      {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
      },
      {
        title: '时间',
        dataIndex: 'timeBetween',
        key: 'timeBetween',
      },
      {
        title: '科目',
        dataIndex: 'kemu',
        key: 'kemu',
      },
      {
        title: '班级',
        dataIndex: 'class',
        key: 'class',
      },
      {
        title: '人数',
        dataIndex: 'studentCount',
        key: 'studentCount',
      },
      {
        title: '校区',
        dataIndex: 'campus',
        key: 'campus',
      },
      {
        title: '类型',
        dataIndex: 'lessonType',
        key: 'lessonType',
      },
      {
        title: '状态',
        dataIndex: 'lessonStatus',
        key: 'lessonStatus',
      },
      {
        title: '操作',
        key: 'action',
        render: record => {
          return (
            <span>
              <div hidden={record.subject !== 1}>
                <Link to={`/lesson3/3/lesson-info?lessonId=${record.key}`}>查看&nbsp;&nbsp;</Link>
                <Link
                  to={`/lesson3/correct/homework?lessonId=${record.key}`}
                  hidden={record.statusId != '3' || !record.isHaveHomework}
                >
                  去批改&nbsp;&nbsp;
                </Link>
                <Link
                  to={`/lesson3/feedBack?lessonId=${record.key}`}
                  hidden={record.statusId != '4'}
                >
                  反馈家长
                </Link>
              </div>
              <div hidden={record.subject === 1}>
                <Link to={`/lesson3/lessonInfo/other?lessonId=${record.key}`}>查看&nbsp;&nbsp;</Link>
                <Link
                  to={`/lesson3/feedBack?lessonId=${record.key}`}
                  hidden={record.noMathStatus !== 1}
                >
                  反馈家长
                </Link>
              </div>
            </span>
          );
        },
      },
    ];
  };
  handleChange = value => {
    const { current: page, pageSize } = value;
    const { dispatch } = this.props;
    const param = { page, pageSize };
    this.refreshTable(param);
  };
  handleMenuClick = value => {
    const { dataSource = [] } = this.props.lesson;
    if (value === '-1') {
      this.setState({ data: dataSource });
    } else {
      const newData = dataSource.filter(d => d.statusId + '' === value);
      this.setState({ data: newData });
    }
  };

  render = () => {
    const { loading } = this.props;

    const columns = this.lessonColumn();

    const { teacherInfo = {} } = this.props.lesson;

    const { data } = this.state;

    const Option = Select.Option;

    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Row type="flex" align="middle">
            <Col span={5}>
              账号：<strong>{getCurrentUser().name}</strong>
            </Col>
            <Col span={2}>
              待上课：<strong>{teacherInfo.needToClass}</strong>
            </Col>
            <Col span={3}>
              待备课程：<strong>{teacherInfo.needToPreview}</strong>
            </Col>
            <Col span={2}>
              待评价：<strong>{teacherInfo.needToComment}</strong>
            </Col>
            <Col span={2}>
              待批改：<strong>{teacherInfo.needToCorrect}</strong>
            </Col>
            <Col span={10} style={{ textAlign: 'right' }}>
              授课班级：<strong>{teacherInfo.classCount}</strong>
              课程状态：
              <Select defaultValue="全部" style={{ width: 120 }} onChange={this.handleMenuClick}>
                <Option value="-1">全部</Option>
                <Option value="0">未备课</Option>
                <Option value="1">未上课</Option>
                <Option value="2">上课中</Option>
                <Option value="3">未批改</Option>
                <Option value="4">未评价</Option>
                <Option value="5">已完成</Option>
              </Select>
            </Col>
          </Row>
        </Card>
        <Divider />
        <Card bordered={false}>
          <Table
            dataSource={data}
            columns={columns}
            loading={loading}
            pagination={{
              hideOnSinglePage: true,
              showTotal() {
                return (
                  <span>
                    共 <a style={{ color: '#1893ab' }}>{data.length}</a> 道
                  </span>
                );
              },
            }}
            onChange={this.handleChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  };
}

export default LessonTableList;
